<style>
    .demo-drawer-profile{
        font-size: 14px;
    }
    .demo-drawer-profile .ivu-col{
        margin-bottom: 50px;
    }
</style>
<template>
	<div style="margin-top: 20px;">
		<Row type="flex" justify="end" class="code-row-bg" :gutter="16">
			<Col span="2" style="position: absolute;left: 0;">
			<Button type="primary" icon="ios-arrow-back" @click="goBack()">返回</Button>
			</Col>
		</Row>
		<br>

		<Row>
			<div class="demo-spin-container" v-if="tableLoading">
				<Spin fix>
					<Icon type="load-c" size=18 class="spin-icon-load"></Icon>
					<div>加载中...</div>
				</Spin>
			</div>
			<Table border :columns="columns" :data="feeds.data" @on-sort-change='onSortChange' style="margin-top: 32px;"></Table>
			<div style="margin: 10px;overflow: hidden">
				<div style="float: right;">
					<Page :total="feeds.record_count" :current="feeds.page_current" :page-size="feeds.page_size" class="paging" show-elevator show-total show-sizer @on-change="handleOnPageChange" @on-page-size-change='onPageSizeChange'></Page>
				</div>
			</div>
		</Row>
		
		
			 <Drawer :closable="false" width="400" v-model="showModal">
          		<div class="demo-drawer-profile">
			       <Row>
	                    <Col span="14" style="text-align: center;">
	                         <span style="font-weight: bold;">{{formData.msg_title}}</span>
	                    </Col>
	                    <Col span="14" style="text-align: center;">
	                    	 <span>{{formData.msg_intro}}</span>
	                    </Col>
	                    <Col span="14" style="text-align: center;">
	                         <span>{{formData.create_time}}</span>
	                    </Col>
	                </Row>
                </div>
             </Drawer>
        
	</div>
        
</template>

<script>
	import {
		getMessage,
		getMessageInfo
	} from '@/api/home'

	export default {
		components: {
		
		},
		data() {
			return {
				getSearchData :{
					status:[]
				},
				searchForm: {
					status:''
	   			},
				tableLoading: false,
				tableStatus: {
					enable: []
				},
				feeds: {
					data: [],
					record_count: 0,
					page_current: 1,
					page_size: 10
				},
				showModal:false,
				formData:{
					msg_title:'',
					msg_intro:'',
					create_time:''
				},
				columns: [{
						title: 'ID',
						key: 'msg_id',
						sortable: true,
						width: 100
				},
					{
						title: '标题',
						render: (h, params) => {
							let type_color;
							switch(params.row.is_read){
								case 1:
								type_color = 'success';
								break;
								case -1:
								type_color = 'error';
								break;
							}
							return h('div', 
							[
								h('Badge', {
									props: {
                                           text:params.row.msg_title,
                                           type:type_color
									},
									attrs: {
//										src: params.row.head_img,
									},
									on: {
										click: (value) => {}
									}
								}),
							])
						}
					},
					{
						title: '内容',
						key:'msg_intro'
					},
					{
						title: '时间',
						key:'create_time'
					},
					{
						title: '操作',
						render: (h, params) => {
							let t = this;
							return h('div', [
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									on: {
										click: () => {
											t.getInfoExcute(params.row.msg_id);
										}
									}

								}, '查看'),

							])
						}
					},
				]
			}
		},
		created() {
			let t = this
			t.getTableDataExcute(t.feeds.page_current);
		},
		methods: {
			handleOnPageChange: function(page_current) {
				this.getTableDataExcute(page_current)
			},
			onPageSizeChange: function(page_size) {
				this.feeds.page_size = page_size
				this.getTableDataExcute(1)
			},
			getTableDataExcute(page_current) {
				let t = this
				t.tableLoading = true
				t.feeds.page_current = page_current
				getMessage(page_current, t.feeds.page_size, t.searchForm).then(res => {
					    	//console.log(res);
					t.feeds.data = res.data.data.list
					//					console.log(t.feeds.data);
					t.feeds.record_count = res.data.data.record_count
					t.tableLoading = false
				}, function(error) {
					t.tableLoading = false
				})
			},
			onSortChange: function(data) {

			},
			getInfoExcute(msg_id){
				let t =this;
				getMessageInfo(msg_id).then(res=>{
					if(res.data.code == 1){
						
						 let res_data = res.data.data;
//						 console.log(res_data);return;
						 t.formData ={
						 	msg_title:res_data.msg_title,
							msg_intro:res_data.msg_intro,
							create_time:res_data.create_time
						 }
						  t.getTableDataExcute(t.feeds.page_current)
						  t.showModal = true;
					}else{
						t.$Notice.error({
						   title: res.data.msg
				        })
					}
				}),function(error){
					
				}
			},
			goBack(){
				 this.$router.push({
            		name: 'home'
          		})
			}
		}
	}
</script>